<template>
  <div class="sult">
    <div class="sult_1"></div>
    <div class="sult_2">
      <Card
        :remainTime="remain"
        :cardIdx="cids"
        @changeCard="handlerCard(arguments)"
        ref="card"
        v-if="used !== -1"
      ></Card>
      <div class="line_con">
        <div class="line" ref="line"></div>
      </div>

      <p class="des">距离比亚迪新春大红包还有 {{ used === -1 ? 5 : 5 - used }} 张牌</p>
    </div>

    <div class="sult_3">
      <div class="btn_get" @click="goShare()"></div>
      <ul class="coupon_list">
        <li class="coupon" v-for="(item, index) in untickets" :key="index">
          <div class="coupon_cant" v-if="item.isgot"></div>
          <div class="coupon_can" @click="haveCoupon(item.id)" v-else></div>
        </li>
      </ul>
    </div>

    <div class="fixed" v-show="isfixed"></div>
  </div>
</template>

<script>
import Card from "../components/card.vue";

export default {
  name: "sult",
  components: { Card },
  metaInfo() {
    return {
      meta: [
        {
          name: "Alipay:link",
          content: `https://www1.pcauto.com.cn/zt/gz20210120/byd/zfb/index.html?shareId=${this.id}`,
        },
      ],
    };
  },

  data() {
    return {
      loading: {}, //加载中
      uid: "",
      id: 0,
      pro: "",
      city: "",
      isfixed: false,
      remain: 0, //剩余抽奖机会
      used: -1, //抽了几次奖,初始为-1不加载子组件Card,只有当从接口获取数据改变used才会加载组件Card
      cids: [],
      untickets: this.$CONF.untickets, // 页面的券对象
      ontickets: [], // 接口获取的已领取的券id
    };
  },
  methods: {
    // 定位处理
    isArea() {
      if (!this.$CONF.areaArr.length && !this.$CONF.lotteryArea) return;
      // 如果活动不需要限制地区且抽奖接口不需要传省市 以下js终止执行
      this.loading = this.$toast.loading({
        message: "加载中...",
        duration: 0, // 无限时长loading
      });
      this.$TOOL
        .location()
        .then((res) => {
          this.loading.clear();
          this.pro = this.$TOOL.formatArea(res.pro);
          this.city = this.$TOOL.formatArea(res.city);

          if (this.$CONF.areaArr.length === 0) return;
          // 如果活动不需要限制地区，以下js终止执行

          let locationArr = [],
            isHave = false;
          locationArr.push(this.$TOOL.formatArea(res.pro));
          locationArr.push(this.$TOOL.formatArea(res.city));
          locationArr.map((item) => {
            this.$CONF.areaArr.indexOf(item) > -1 && (isHave = true);
          });

          if (!isHave) {
            this.$router.replace("home");
            return;
          }
          this.getUserInfo();
        })
        .catch((msg) => {
          this.loading.clear();
          if (this.$CONF.areaArr.length === 0) return;
          this.$toast(msg.message);
          this.$router.replace("home");
        });
    },

    // 获取用户信息
    getUserInfo() {
      this.$http({
        method: "get",
        url: `${this.$CONF.baseUrl}getUserInfo.jsp?ischeck=false`,
      })
        .then((res) => {
          let data = res.data;
          console.log(data);
          if (data.code === 1) {
            this.uid = data.uid;
            this.id = data.id;
            this.ontickets = data.ticketIds;
            this.remain = data.remainLotteryTime;
            this.used = data.usedLotteryTime;
            this.cids = data.cardIds;
            console.log(this.used);
            this.couponStatus();
          } else {
            data.msg && this.$toast(data.msg);
            this.$router.replace("home");
          }
        })
        .catch((err) => {
          console.log(err);
          this.$toast("网络错误，请稍后再试");
          this.$router.replace("home");
        });
    },

    // 判断券状态
    couponStatus() {
      this.untickets.map((item) => {
        this.ontickets.indexOf(item.id) > -1 && (item.isgot = true);
      });
    },

    // 接受card子组件传的数据改变cards
    handlerCard(msg) {
      this.cids.push(msg[0]);
    },

    // 领券
    haveCoupon(couponId) {
      // 酷车领券接口加上format=js，代表酷车后端把领券链接挂载到window.couponJumpUrl上，然后再跳转
      let url = encodeURIComponent(`${this.$CONF.baseUrl}haveCoupon.jsp`);
      url = `https://merchant.pangku.com/client/getcoupon?coupon_id=${couponId}&uid=${this.uid}&callback=${url}&format=js`;
      let couponScript = document.createElement("script");
      couponScript.src = url;
      couponScript.onload = function () {
        AlipayJSBridge.call("pushWindow", {
          url: window.couponJumpUrl,
          param: {
            readTitle: true,
            showOptionMenu: false,
          },
        });
      };
      document.body.appendChild(couponScript);
    },

    // 领券回来
    showError(data, id) {
      this.$toast(data);
      if (!data) return false;
      if (data == "您已领取该优惠券，不能再领取了哦") {
        this.ontickets.push(id) && this.couponStatus();
      } else if (data == "领取成功") {
        this.ontickets.push(id) && this.couponStatus();
      } else {
      }
      this.$TOOL.delCookie("pcautoAlipay");
    },

    // 跳分享页
    goShare() {
      console.log(`/share/${this.id}`);
      this.$router.push({ path: `/share/${this.id}` });
    },

    // 初始响应进度条,可以看到一点点
    loadLine() {
      let load = 1 - this.used / 5;
      this.$refs.line.style.setProperty("--load", `-${load * 100}%`);
    },
  },

  mounted() {
    this.isArea();
    this.loadLine();
    // this.getUserInfo();

    const _this = this;
    this.$TOOL.ready(() => {
      //手机领券回退按钮 页面刷新处理
      document.addEventListener("resume", (event) => {
        let pcautoAlipay = this.$TOOL.getCookie("pcautoAlipay");
        if (!pcautoAlipay) return false;
        pcautoAlipay = JSON.parse(pcautoAlipay);
        _this.showError(
          decodeURI(pcautoAlipay.error_msg),
          decodeURI(pcautoAlipay.coupid)
        );
      });
    });
  },

  // 监听响应进度条
  watch: {
    used(n) {
      let load = 1 - this.used / 5;
      this.$refs.line.style.setProperty("--load", `-${load * 100}%`);
    },
  },
};
</script>

<style lang="scss">
.sult {
  .sult_1 {
    height: 3.32rem;
    background: url(../assets/images/sult_1.jpg) no-repeat center top / cover;
  }
  .sult_2 {
    height: 6.5rem;
    background: url(../assets/images/sult_2.jpg) no-repeat center top / cover;
    position: relative;
    margin-top: -1px;
    .line_con {
      width: 5.93rem;
      height: 0.26rem;
      border-radius: 0.16rem;
      position: absolute;
      top: 5.2rem;
      left: 50%;
      transform: translateX(-50%);
      background: #fff;
      overflow: hidden;
      box-sizing: border-box;
      border: 0.03rem solid #ffc76f;
      .line {
        width: 5.88rem;
        height: 0.2rem;
        transition: 0.5s;
        border-radius: 0.11rem;
        transform: translateX(var(--load));
        background: url(../assets/images/line.png) no-repeat 0 0 / cover;
      }
    }
    .des {
      width: 7.5rem;
      font-size: 0.29rem;
      text-align: center;
      position: absolute;
      top: 5.8rem;
      line-height: 1.2;
      color: #fff;
      letter-spacing: 1px;
      text-shadow: 1px 1px 1px #333;
    }
  }
  .sult_3 {
    height: 5.26rem;
    background: url(../assets/images/sult_3.jpg) no-repeat center top / cover;
    position: relative;
    margin-top: -1px;
    .btn_get {
      width: 5.1rem;
      height: 1.02rem;
      background: url(../assets/images/btn_get.png) no-repeat center top / contain;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    .coupon_list {
      position: absolute;
      top: 1.18rem;
      left: 50%;
      transform: translateX(-50%);
      .coupon {
        width: 5.1rem;
        height: 1.02rem;
        position: relative;
        .coupon_can {
          width: 5.1rem;
          height: 1.02rem;
          position: absolute;
          background: url(../assets/images/coupon_can.png) no-repeat center top / contain;
        }
        .coupon_cant {
          width: 5.1rem;
          height: 1.02rem;
          position: absolute;
          background: url(../assets/images/coupon_cant.png) no-repeat center top / contain;
        }
      }
    }
  }
}

.repeat {
  display: none;
  width: 7.5rem;
  height: 7.11rem;
  background: url(../assets/images/repeat.png) no-repeat center top / contain;
  position: fixed;
  top: 2rem;
  left: 0;
  z-index: 10;
  .btn_share {
    width: 4.81rem;
    height: 1.02rem;
    background: url(../assets/images/btn_share.png) no-repeat center top / contain;
    position: absolute;
    top: 2.36rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .close {
    width: 1rem;
    height: 1rem;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}

.fixed {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9;
}

.van-toast {
  background-color: rgba(0, 0, 0, 0.9);
  font-size: 15px;
}
</style>
